<!--
 * @Author: your name
 * @Date: 2021-09-21 14:31:41
 * @LastEditTime: 2021-10-08 11:35:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \product-display\src\page\operate\form.vue
-->
<template>
  <div class="typeForm">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-form-item label="父级分类：" prop="parentId">
        <el-cascader v-model="form.parentId" :options="options" :disabled="disabled"
        :props="{ checkStrictly: true }" :show-all-levels="false" placeholder="选择父级分类"></el-cascader>
      </el-form-item>
      <el-form-item label="分类名称：" prop="categoryName">
        <el-input v-model="form.categoryName" placeholder="请输入分类名称" maxlength="10"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="onSubmit">{{ buttonText }}</el-button>
        <el-button @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addProductCategory, updateProductCategory } from '@/api/api.js'

export default {
  name: 'Login',
  data () {
    return {
      form: {
        categoryName: '',
        parentId: 41
      },
      options: [],
      rules: {
        parentId: [{ required: true, message: '请选择父级分类', trigger: 'change' }],
        categoryName: [{ required: true, message: '请输入分类名称', trigger: 'change' }]
      },
      list: [{id: -1, parentId: 0, categoryName: '顶级分类'}],
      pageQuery: {},
      loading: false,
      disabled: false,
      buttonText: '立即创建'
    }
  },
  mounted () {
    this.pageQuery = this.$route.query
    const productCategoryList = localStorage.getItem('productCategoryList')
    if (productCategoryList) {
      this.list = [ ...this.list, ...JSON.parse(productCategoryList) ]
    }
    // console.log(this.list)
    this.options = this.listToTree(this.list, 0)
    if (this.pageQuery.id) {
      this.form.categoryName = this.pageQuery.categoryName
      let parentId = this.pageQuery.parentId === '0' ? -1 : Number(this.pageQuery.parentId)
      this.form.parentId = [ parentId ]
      this.disabled = true
      this.buttonText = '立即更新'
    }
  },
  methods: {
    listToTree (list, pid) {
      let tree = []
      let temp
      for (const item of list) {
        if (item.parentId === pid) {
          item.label = item.categoryName
          item.value = item.id
          temp = this.listToTree(list, item.id)
          if (temp.length > 0) {
            item.children = temp
          }
          tree.push(item)
        }
      }
      return tree
    },
    onSubmit () {
      this.$refs.form.validate((valid) => {
        // console.log(this.form)
        if (valid) {
          this.loading = true
          if (this.pageQuery.id) {
            updateProductCategory({
              id: this.pageQuery.id,
              categoryName: this.form.categoryName,
              parentId: this.pageQuery.parentId
            }).then(() => {
              this.$message({
                message: '更新成功',
                type: 'success'
              })
              this.loading = false
              this.back()
            }).catch(() => {
              this.loading = false
            })
          } else {
            const parentId = this.form.parentId[this.form.parentId.length - 1]
            addProductCategory({
              categoryName: this.form.categoryName,
              parentId: parentId < 0 ? 0 : parentId
            }).then(() => {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.loading = false
              this.back()
            }).catch(() => {
              this.loading = false
            })
          }
        }
      })
    },
    back () {
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
.typeForm {
  padding-top: 50px;
  width: 400px;
}
</style>
